<template>
    <div class="container">
        <!--顶部搜索框和男女分类-->
        <div class="top" ref="top">
            <div>
                <router-link to="/search" class="search">
                    <img src="../assets/img/search-icon.png"/>
                    <div>请输入书名搜索</div>
                </router-link>
<!--                <div class="nan_nv">-->
<!--                    <div :class=" sex==1 ? 'nan_nv_color' : '' " @click="boy_girl(1)">男生</div>-->
<!--                    <div :class=" sex==2 ? 'nan_nv_color' : '' " @click="boy_girl(2)">女生</div>-->
<!--                </div>-->
            </div>
        </div>
<!--    活动充值弹窗-->
        <div class="tehui" v-if="tehui">
            <div class="tehui-content">
                <div @click="gbtehui">X</div>
                <router-link to="/tehui" >
                    <img class="tehui-img" src="../assets/img/20190721122641.png">
                </router-link>
            </div>
        </div>
        <!--主体内容-->
        <div class="content" :style="{marginTop:height+'px'}">
            <!--轮播图-->
            <div class="lunbo">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="lunbo in lunbo_books" :key="lunbo.ID">
                            <a :href="lunbo.Url">
                                <img v-lazy="lunbo.ImageUrl"/>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!--功能-->
            <div class="function">
                <router-link tag="div" to="/classify_search">
                    <img src="../assets/img/cate.png"/>
                    <span>分类</span>
                </router-link>
                <router-link tag="div" :to="{path:'/classify',query:{sex:sex,order:user_rec,title:'热门排行'}}">
                    <img src="../assets/img/rank.png"/>
                    <span>排行</span>
                </router-link>
                <router-link tag="div" :to="{path:'/classify',query:{sex:sex,order:day_rec,title:'本周新书'}}">
                    <img src="../assets/img/new.png"/>
                    <span>新书</span>
                </router-link>
                <router-link tag="div" to="/chongzhi">
                    <img src="../assets/img/amont.png"/>
                    <span>充值</span>
                </router-link>
            </div>
            <!--分隔-->
            <div class="divide"></div>
            <!--本周热门-->
            <div class="remen">
                <router-link class="title" :to="{path:'/classify',query:{sex:sex,order:user_rec,title:'热门推荐'}}">
                    <div>热门推荐</div>
                    <div>查看更多</div>
                </router-link>
                <div class="remen_content">
                    <router-link tag="div" :to="{path:'/book_details',query:{ id:hot.ID }}" v-for="hot in hot_books" :key="hot.ID">
                        <img v-lazy="hot.ImageUrl"/>
                        <p>{{hot.Title}}</p>
                    </router-link>
                </div>
            </div>
            <div class="divide"></div>
            <!--主编力荐-->
            <div class="zhubain">
                <router-link class="title" :to="{path:'/classify',query:{sex:sex,order:admin_rec,title:'本周主打'}}">
                    <div>本周主打</div>
                    <div>查看更多</div>
                </router-link>
                <div class="zhubian_content">
                    <div class="swiper-container2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="admin in admin_books" :key="admin.ID">
                                <router-link :to="{path:'/book_details',query:{ id:admin.ID }}">
                                    <img v-lazy="admin.ImageUrl"/>
                                    <p>{{admin.Title}}</p>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="divide"></div>
            <!--本周新书-->
            <div class="xinshu">
                <router-link class="title" :to="{path:'/classify',query:{sex:sex,order:day_rec,title:'重磅抢鲜'}}">
                    <div>重磅抢鲜</div>
                    <div>查看更多</div>
                </router-link>
                <div class="xinshu_content">
                    <router-link tag="div" :to="{path:'/book_details',query:{ id:news.ID }}" v-for="news in new_books" :key="news.ID">
                        <img v-lazy="news.ImageUrl"/>
                        <p>{{news.Title}}</p>
                    </router-link>
                </div>
            </div>
            <div class="divide"></div>
            <!--男女精选-->
            <div class="jinxuan">
                <router-link class="title" :to="{path:'/classify',query:{sex:sex,order:'UserRec',title:title}}">
                    <div>{{title}}</div>
                    <div>查看更多</div>
                </router-link>
                <div class="jinxuan_content">
                    <router-link tag="div" :to="{path:'/book_details',query:{ id:sexs.ID }}" v-for="sexs in sex_books" :key="sexs.ID">
                        <img v-lazy="sexs.ImageUrl"/>
                        <div>
                            <div class="name">{{sexs.Title}}</div>
                            <div class="intro">{{sexs.Description}}</div>
                            <div class="label">{{sexs.TagName}}</div>
                        </div>
                    </router-link>
                </div>
            </div>
            <!--底部分类 男生-->
            <div  v-if="sex==1">
                <div class="bottom-img">
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'user_rec',title:'都市佣兵',TagName:'都市'}}" tag="div"><img src="../assets/img/mercenary@2x.png"/></router-link>
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'admin_rec',title:'极品爽文',TagName:'都市'}}" tag="div"><img src="../assets/img/61b0158410.jpg"/></router-link>
                </div>
                <div class="bottom-img">
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'user_rec',title:'玄幻仙侠',TagName:'玄幻'}}" tag="div"><img src="../assets/img/cbf7e70cfc.jpg"/></router-link>
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'admin_rec',title:'异术超能',TagName:'玄幻'}}" tag="div"><img src="../assets/img/5a5eb6fa71.jpg"/></router-link>
                </div>
            </div>
            <!--底部分类 女生-->
            <div v-else>
                <div class="bottom-img">
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'user_rec',title:'婚恋言情',TagName:'婚恋生活'}}" tag="div"><img src="../assets/img/romance@2x.png"/></router-link>
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'user_rec',title:'豪门世家',TagName:'总裁豪门'}}" tag="div"><img src="../assets/img/sarcar@2x.png"/></router-link>
                </div>
                <div class="bottom-img">
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'user_rec',title:'穿越时空',TagName:'穿越重生'}}" tag="div"><img src="../assets/img/efe0b3adfe.jpg"/></router-link>
                    <router-link :to="{path:'/classify',query:{sex:sex,order:'user_rec',title:'短篇虐爱',TagName:'幻想言情'}}" tag="div"><img src="../assets/img/c82ea72a0f.jpg"/></router-link>
                </div>
            </div>
            <!--底部二维码-->
            <div class="bottom">
                <p>长按3秒快速关注公众号</p>
                <img v-if="qrcode_img" v-lazy="$axios.defaults.baseURL + '/image-proxy?url=' + qrcode_img"/>
                <p>千万小说精品送给您，天天领福利</p>
            </div>
        </div>
        <bottom :i="icon"></bottom>
    </div>
</template>

<script>
    //一定时间显示特惠弹窗
    const tehuiTime = 1000 * 3600 * 12; // 12 小时时间(毫秒)
    let tehui_time = function () {
        let now = (new Date()).getTime();
        localStorage.setItem("tehui",now);
    }
    let pd_time = function () {
        return false
        // let time = localStorage.getItem("tehui");
        // let zTime = parseInt(time) + parseInt(tehuiTime);
        // if(zTime){
        //     return !(zTime > (new Date()).getTime());
        // }else{
        //     return true;
        // }
    }
    import bottom from './bottom'
    import Swiper from 'swiper'
    export default {
        name: 'index',
        components:{
            bottom,
        },
        data() {
            return{
                tehui: pd_time(),
                qrcode_img: '',
                height: 70,
                sex: 1,
                icon: 1,
                url_sex: this.$route.query.sex,//默认男生，女生为sex=girl
                admin_rec: 'AdminRec',
                user_rec: 'WeekRec',
                day_rec: 'DayRec',
                title: '好书试读',
                lunbo_books: [],//轮播图列表
                hot_books: [],//本周热门
                admin_books: [],//主编力荐
                new_books: [],//本周新书
                sex_books: [],//男女精选
            }
        },
        created:function(){
            document.title='首页'
            console.log('没有缓存')
            // localStorage.clear()
            // let item=localStorage.getItem('sex')
            // if(item != null ){
            //     this.sex = item
            // }else{
            //     this.sex = 1
            // }
            // if(this.url_sex == 'girl'){
            //     this.sex = 2
            //     localStorage.setItem('sex',this.sex);
            // }
            this.qrcode()
            this.index()
        },
        activated(){
          console.log('已缓存')
        },
        mounted(){
            this.swiper()
            this.set()
        },
        methods: {
            //关闭特惠弹窗
            gbtehui(){
                tehui_time()
                this.tehui = false
            },
            //自动播放轮播图
            swiper: function () {
                new Swiper('.swiper-container', {
                    // loop: true, // 循环模式选项
                    // autoplay: true,//自动循环
                    observer:true,
                    // observeParents:true,
                    // effect : 'flip',
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay: {
                        disableOnInteraction: false,   // 手动滑动后继续自动播放
                    },
                })
            },
            //底部菜单
            set:function(){
                this.$emit('set',1)
            },
            //手指滑动图片
            swiper2:function(){
                setTimeout(function () {
                    new Swiper('.swiper-container2', {
                        slidesPerView: 2.7,
                        spaceBetween: 15,
                    });
                },0)
            },
            //男女切换
            boy_girl:function(bg){
                this.sex=bg
                if(this.sex == 1){
                    this.title='男生精选'
                }else{
                    this.title='女生精选'
                }
                localStorage.setItem('sex',this.sex);
                this.index()
            },
            //首页书籍
            index:function(){
                //本周热门
                this.$axios.get('/books',{params: {PtID:0,ForbidView:2,Finished:0,Sex:this.sex,Limit:6,Offset:0,Order:this.user_rec,Descending:true}}).then(response=>{
                    this.hot_books=response.data.books
                })
                //主编力荐
                this.$axios.get('/books',{params: {PtID:0,ForbidView:2,Finished:0,Sex:this.sex,Limit:20,Offset:0,Order:this.admin_rec,Descending:true}}).then(response=>{
                    this.admin_books=response.data.books
                    this.swiper2()
                })
                //本周新书
                this.$axios.get('/books',{params: {PtID:0,ForbidView:2,Finished:0,Sex:this.sex,Limit:6,Offset:0,Order:this.day_rec,Descending:true}}).then(response=>{
                    this.new_books=response.data.books
                })
                //男女精选
                this.$axios.get('/books',{params: {PtID:0,ForbidView:2,Finished:0,Sex:this.sex,Limit:3,Offset:0,Order:'UserRec',Descending:true}}).then(response=>{
                    this.sex_books=response.data.books
                })
                //轮播图片
                this.$axios.get('/sliders',{params:{Sex:this.sex}}).then(response=>{
                    this.lunbo_books=response.data.sliders
                })
            },
            //底部二维码
            qrcode:function(){
                this.$axios.get( "/app-qrcode").then(response=>{
                    this.qrcode_img=response.data.url
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import "../assets/css/swiper-4.4.1.min.css";
    /*@import "../assets/css/idangerous.swiper2.7.6.css";*/
    .tehui{
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0px;
        left: 0px;
        background: rgba(0,0,0,0.5);
        z-index: 10000;
        display: flex;
    }
    .tehui-content{
        width: 70%;
        height: 70%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tehui-img{
        width: 100%;
    }
    .tehui-content div{
        position: absolute;
        top: 20%;
        right: 10%;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 3px solid white;
        color: white;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lunbo >>>.swiper-pagination-bullet{
        background: white;
    }
    .top{
        position: fixed;
        top: 0px;
        width: 100%;
        height: 70px;
        background-color: white;
        z-index: 100;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
    }
    .top>div{
        padding: 10px;
    }
    .search{
        color: #8a8a8f;
        background-color: #f5f5f5;
        margin: 10px 0px;
        border-radius: 1.5rem;
        display: flex;
        align-items: center;
        padding: 0px 2px;
    }
    .search img{
        width: 30px;
        height: 30px;
    }
    .nan_nv{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .nan_nv div{
        width: 50%;
    }
    .nan_nv:before{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 2px;
        content: "";
        height: 1.3rem;
        display: block;
        background-color: #ccc;
    }
    .nan_nv_color{
        color: #3688ff;
    }
    .lunbo img{
        width: 100%;
        height: 25vh;
    }
    .function{
        margin: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        font-size: 0.95rem;
    }
    .function img{
        width: 50px;
        height: 50px;
    }
    .function>div{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .divide{
        margin: 5px 0px;
        width: 100%;
        height: 0.7rem;
        background: #f3f4f5;
    }
    .title{
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        color: black;
    }
    .title:before{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 1.2rem;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #3688ff;
    }
    .title>div:nth-child(1){
        font-weight: bold;
        font-size: 1.1rem;
    }
    .title>div:nth-child(2){
        font-size: 0.95rem;
        color: #999;
    }
    .remen_content,.xinshu_content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding:6px 15px;
    }
    .remen_content>div,.xinshu_content>div{
        width: 30.6%;
    }
    .remen_content img,.xinshu_content img{
        width: 100%;
        height: 21vh;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .remen_content p,.zhubian_content p,.xinshu_content p{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 6px 0px 10px;
        font-size: 0.9rem;
        color: #4a4848;
        text-align: left;
    }
    .zhubian_content >>>.swiper-container2{
        width: 92%!important;
        margin: auto;
        overflow: hidden;
        /*禁止触发默认的手势操作*/
        /*touch-action: none;*/
    }
    .zhubian_content{
        overflow: hidden;
        /*touch-action: none;*/
        margin-top: 5px;
    }
    .zhubian_content img{
        width: 100%;
        height: 24vh;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .jinxuan_content>div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
    }
    .jinxuan_content img{
        flex: none;
        width: 6rem;
        height: 8rem;
        margin-right: 20px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .jinxuan{
        margin-bottom: 20px;
    }
    .name{
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    .intro{
        color: #999;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .label{
        margin-top: 10px;
        color: #999;
    }
    .bottom-img{
        display: flex;
    }
    .bottom-img div{
        width: 44.5%;
        padding: 10px;
    }
    .bottom-img img{
        width: 100%;
    }
    .bottom{
        text-align: center;
        font-size: 0.9rem;
    }
    .bottom p{
        margin: 5px;
    }
    .bottom img{
        width: 40%;
    }
    a{
        text-decoration: none;
    }
    @media (min-width: 768px) {
        .container,.top{
            margin: auto;
            width: 750px;
        }
    }
</style>
